<template>
    <div class="shopcar">
        <div class="shopcar_tips box" v-if="hasGood">
            <van-notice-bar text="欢迎使用维康宝云商城(提示:左滑为删除购物车数据)" left-icon="volume-o" />
        </div>

        <div class="car_list box" v-if="hasGood" >

            <div class="all_input box">
                <label for="foot-check" class="input-label" :class="{active: selected_all}" @click="slectAll"></label>
                <p>{{selected_all ? '反选' : '全选'}}</p>
            </div>

            <ul class="car_list_ul">
                <li class="car-item box" v-for="(item,index) in initData.goodscard" :key="index">
                    <div class="car-item_slide"  data-type="0" >
                        <div class="slider_content box"
                            @touchstart.capture = "touchStart"
                            @touchend.capture = "touchEnd"
                        >
                            <div class="car-item_bottom box">
                                <div class="input-block" @click="selectOne(item.id)">
                                    <label class="input-label input-label_block" :class="{active: item.pitch}" :for="'car-checkbox-'+index"></label>
                                </div>
                                <div class="car-item-content">

                                    <div class="car-img fl" @click="goDetail(item.id)">
                                        <img :src="item.cover" />
                                    </div>
                                    <div class="car-fr-info ">

                                        <h3 class="ellipsis">{{item.title}}</h3>
                                        <h4 class="ellipsis">{{item.sku}}</h4>
                                        <div class="car-price">
                                            <span class="fl new_car_price">￥{{item.pay_price}}</span>
                                            <span class="fr old_car_price">￥{{item.base_price}}</span>
                                        </div>

                                        <div class="shop_num" v-if="item.new_model == 1">
                                            <span class="shop_num_jj" @click="reduce(item.id)">-</span>
                                            <input class="shop_num_nm" type="text" :value="item.num" @click="changeNum(item.id, item.num)" />
                                            <span class="shop_num_add" @click="add(item.id)">+</span>
                                        </div>

                                        <div class="shop_num" v-else>
                                            <span class="shop_num_jj">-</span>
                                            <input class="shop_num_nm" type="text" :value="item.num"/>
                                            <span class="shop_num_add">+</span>
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="delete" @click = "deleteItem(item.id)" :data-index = "index">删除</div>
                    </div>
                    <div class="car-item_top box">
                        <p class="box"><span class="fr">{{item.level_price.title}}价格  ￥{{ parseFloat((item.level_price.price * item.num).toFixed(2)) }}<i> </i></span></p>
                        <div class="youhui_list box" v-if="item.open_price == 'show'">
                            <div class="youhui_list_content box">
                                <div class="one_youhui box"  v-for="(price_item,price_index) in item.price_arr" :key="price_index" :class="{bolder: item.level_price.id === price_item.id }">
                                    <div class="box fl">{{price_item.title}}</div>
                                    <div class="box fr">￥{{ parseFloat((price_item.price).toFixed(2)) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </li>
            </ul>
        </div>
        <div v-if="!hasGood" class="no-good" style="text-align: center;padding: 0 .3rem;">
            <van-empty class="vant-image" description="购物车为空" image="../../assets/img/shopcar.png">
                <van-button round type="danger" class="bottom-button" style="border: 1px solid #d64532;background-color: #d64532;" @click="goMall">
                浏览商城
              </van-button>
            </van-empty>
        </div>
        <div class="car-footer">
            <!-- <div class="footer_chajia" v-if="hasGood">
                {{initData.tips_text}}
            </div> -->
            <div class="car-footer_all">
                <div class="foot_go_back" @click="$router.back(-1)">返回</div>
                <div class="total-cont box">
                    <div class="all_price">订单总价：<span>￥{{initData.pay_price_all}}</span></div>
                    <div class="old_all_price">零售总价：<span>￥{{initData.retail_price}}</span></div>
                </div>
                <van-button :class="readOnly == true ? 'div-onlyRead' : 'confirm_button'" type="danger" @click="confirmOrder" style="position: fixed;right: 0;bottom: 0;height: 1.2rem;">提交订单</van-button>
            </div>

        </div>
        <van-dialog v-model="showChangeNum" title="修改商品数量" show-cancel-button @confirm="changeNumFunc">
          <van-field v-model="num" type="number" class="change" />
        </van-dialog>
    </div>
</template>
<script>
import Vue from 'vue'
import { Toast,NoticeBar,Empty,Button,Field, Dialog } from 'vant'
import { initCar } from "@/api/store"
import { getCar } from '@/utils/auth'
import { confirmOrder } from '@/api/order'
import { add, reduce, changeGoodNum, removeGood, checkGood, checkAllGood, removeSelectGood } from "@/utils/handler-good"
Vue.use(NoticeBar).use(Empty).use(Button).use(Field).use(Dialog)
    export default {
        name: 'shopcar',
        data () {
            return {
                initData: {
                    pay_price_all: 0,
                    retail_price: 0
                },
                text: '胶囊每组10瓶左滑删除商品', // 数组文字转化后的字符串
                startX : 0 ,
                endX : 0 ,
                oldTotalPrice: 0,
                totalNum: 0,
                selected_all: false,
                hasGood: false,
                hasSelectGood: false,
                showChangeNum: false,
                num: 0,
                changeId: 0,
                readOnly:false,//true禁止点击 false可以点击
            }
        },

        activated: function () {
            this.initCar()
        },

        watch: {
            'good_list': {
                handler: function (val) {
                    return val;
                },
                deep: true
            }
        },
        methods: {
            changeNum(id, num) {
                this.changeId = id
                this.showChangeNum = true
                this.num = num
            },
            changeNumFunc(){
                changeGoodNum(this.changeId, this.num)
                this.initCar()
            },
            initCar() {
                let data = getCar()
                if (!data || data == 'false') {
                    data = null
                }
                initCar({data}).then(res => {
                    this.hasSelectGood = false
                    if (res.data.length == 0) {
                        this.hasGood = false
                        this.initData.pay_price_all = 0
                        this.initData.retail_price = 0
                        return
                    } else {
                        this.hasGood = true
                    }
                    let selectAll = true
                    this.initData = res.data
                    for ( const index in this.initData.goodscard) {
                        if (!this.initData.goodscard[index].pitch){
                            selectAll = false
                        } else {
                            this.hasSelectGood = true
                        }
                        this.initData.goodscard[index].level_price = this.initData.goodscard[index].price_arr[this.initData.price_grade]
                        this.initData.goodscard[index].open_price = 'hide'
                        if(this.initData.goodscard[index].new_model == 0){
                            this.initData.goodscard[index].num = 1
                        }
                    }
                    this.selected_all = selectAll
                })
            },
            openPrice(id) {
                if (this.initData.goodscard[id].open_price === 'show') {
                  this.initData.goodscard[id].open_price = 'hide'
                  this.initData.goodscard[id].sku = this.initData.goodscard[id].sku + " "
                } else {
                  this.initData.goodscard[id].open_price = 'show'
                  this.initData.goodscard[id].sku = this.initData.goodscard[id].sku + " "
                }
            },
            selectOne(id) {
                checkGood(id)
                this.initCar()
            },
            slectAll() {
                checkAllGood(!this.selected_all)
                this.initCar()
            },
            reduce(id) {
                reduce(id)
                this.initCar()
            },
            add(id) {
                add(id)
                this.initCar()
            },
            //滑动开始
            touchStart(e){
                // 记录初始位置
                this.startX = e.touches[0].clientX;
            },
            //滑动结束
            touchEnd(e){
                // 当前滑动的父级元素
                let parentElement = e.currentTarget.parentElement;
                // 记录结束位置
                this.endX = e.changedTouches[0].clientX;
                // 左滑
                if( parentElement.dataset.type == 0 && this.startX - this.endX > 30 ){
                    this.restSlide();
                    parentElement.dataset.type = 1;
                }
                // 右滑
                if( parentElement.dataset.type == 1 && this.startX - this.endX < -30 ){
                    this.restSlide();
                    parentElement.dataset.type = 0;
                }
                this.startX = 0;
                this.endX = 0;
            },
            //判断当前是否有滑块处于滑动状态
            checkSlide(){
                let listItems = document.querySelectorAll('.car-item_slide');
                for( let i = 0 ; i < listItems.length ; i++){
                    if( listItems[i].dataset.type == 1 ) {
                        return true;
                    }
                }
                return false;
            },
            //复位滑动状态
            restSlide(){
                let listItems = document.querySelectorAll('.car-item_slide');
                // 复位
                for( let i = 0 ; i < listItems.length ; i++){
                    listItems[i].dataset.type = 0;
                }
            },
            deleteItem(id){
                removeGood(id)
                Toast.success({message: '删除成功', duration: 2000})
                this.initCar()
            },
            confirmOrder() {
                let data = getCar()
                if (!data || data == 'false') {
                    Toast.fail({message: '未选择商品', duration: 2000})
                    return
                }
                if (!this.hasSelectGood) {
                    Toast.fail({message: '未选择商品', duration: 2000})
                    return
                }
                this.readOnly = true
                confirmOrder({data}).then(res => {
                    this.readOnly = false
                    if (res.code !== 20000) {
                        if (res.code === 20002) {
                            Dialog.confirm({
                              message: '存在未付款订单，是否进入？',
                            }).then(() => {
                                this.$router.push({path: '/order', query: {status: 2}})
                            }).catch(() => {
                            })
                        } else {
                            Toast.fail({message: res.info, duration: 1000})
                        }
                    } else {
                        removeSelectGood()
                        this.$router.push({path: '/order/detail', query: {id: res.data}})
                    }
                })
            },
            goMall() {
                    this.$router.push({path: '/'})
            },
            goDetail(id) {
                this.$router.push({path: '/good/detail', query: {id}})
            }
        }
    }
</script>

<style>
    .change .van-field__control{
        text-align: center;
        border: 1px solid #eee
    }
    .vant-image{
        margin-top: 2rem;
    }
    .vant-image .van-empty__image{
        width: 90px;
        height: 90px;
    }
</style>

<style lang="stylus" scoped>
    .bottom-button{
        width: 160px;
    }
    .shopcar{
        background: #fff;
        padding-bottom: 2.2rem;
    }
    .bolder{
        font-weight: 600
        font-size: .28rem
    }
    .shopcar_tips{
        width: 100%;
        overflow: hidden;
        background: #fefbe8;
        color: #d47e4d;
        font-size: .28rem;
        padding: 0
        line-height: .8rem;
        height .8rem
    }

    .car_list{
        width: 100%;
        overflow: hidden;

    }
    .all_input{
        width: 100%;
        overflow: hidden;
        padding: .3rem;
    }
    .all_input label{
        float: left;
        margin-left: .06rem;
    }
    .all_input p{
        font-size: .28rem;
        float: left;
        width: 50%;
        color: #000;
        line-height: .44rem;
        margin-left: .3rem;
    }
    .car_list_ul{
        width: 100%;
        overflow: hidden;
    }
    .car-item{
        border-top: 1px solid #ddd;

        padding: .3rem 0;

    }
    .car-item_slide{
        position: relative;
        -webkit-transition: all 0.2s;
        transition: all 0.2s
        background: #fff;
    }
    .car-item_slide[data-type="0"]{
        transform: translate3d(0,0,0);
    }
    .car-item_slide[data-type="1"]{
        transform: translate3d(-1.5rem,0,0);
    }
    .slider_content{
        position: relative;
    }


    .delete{
        width: 1.5rem;
        margin-left: .3rem;
        background: #ff4949;
        font-size: .34rem;
        color: #fff;
        text-align: center;
        line-height: 2.3rem
        position: absolute;
        top: -.3rem;
        right: -1.5rem;
    }

    .car-item:last-child{
        border-bottom: 1px solid #ddd;
    }
    .car-item_top{
        width: 100%;
        overflow: hidden;
        padding: 0 .3rem;
        margin-top: .4rem;
    }
    .car-item_top p{
        width: 100%;
        overflow: hidden;
        line-height: 1.3;
        font-size: .30rem;
        text-align: left;
        padding: 0 .2rem;
    }
    .car-item_top span{
        color: #d64532;
    }
    .car-item_top span i{
        color #333
    }
    .youhui_list{
        width: 100%;
        background: #fff;
        padding: .3rem 0;
    }
    .youhui_list_content{
        background: #f9f9f9;
        border-radius: 4px;

    }
    .one_youhui{
        width: 100%;
        overflow: hidden;
        line-height: .6rem;
        padding: .2rem;
        font-size: .28rem;
        border-top: 1px dashed #ccc;
    }
    .one_youhui .fl{
        width: 80%;
        overflow: hidden;

    }
    .one_youhui .fr{
        width: 20%;
        overflow: hidden;
        color: #d64532;
    }
    .car-item_bottom{
        width: 100%;
        overflow: hidden;
        padding: 0 .3rem;
        display: flex;
    }
    .car-checkbox{
        display: none;
    }
    .car-item-content{

        flex: 1;
        -webkit-flex: 1;
        overflow: hidden;
    }

    .input-block{
        width: .6rem;
        margin-right: .3rem;
        overflow: hidden;
    }
    .input-label{
        cursor: pointer;
        position: relative;
        width: .36rem;
        height: .36rem;
        display: block;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #ccc;
        border-radius: 50%;

    }
    .input-label:before,
    .input-label:after {
        content: '';
        pointer-events: none;
        position: absolute;
        color: #fff;
        border: 1px solid #fff;
        background-color: white;
    }
    .input-label:before {
        width: 1px;
        height: 0px;
        left: 20%;
        top: 50%;
        transform: skew(0deg, 50deg);
    }
    .input-label:after {
        width: 4px;
        height: 0px;
        left: 40%;
        top: 40%;
        transform: skew(0deg, -50deg);
    }
    .input-label_block{
        margin: 0 auto; /*水平居中*/
        position: relative;
        top: 50%; /*偏移*/
        transform: translateY(-50%);
    }

    .car-img{
        width: 1.7rem;
        height: 1.7rem;
        margin-right: .3rem;
        border-radius: 4px;
        border: 1px solid #eee
        overflow: hidden;
    }
    .car-img img{
        width :100%;
        overflow: hidden;
    }
    .input-label.active{
        background :#f1a240;
        border: 2px solid #f1a240


    }
    .car-fr-info{

       overflow: hidden;
    }
    .car-fr-info h3{
        font-weight: 500;
        color: #000;
        line-height: 1.2;
        font-size: .32rem;
        width: 100%;
    }
    .car-fr-info h4{
        font-weight: 500;
        color: #9e9e9e;
        line-height: 1.2;
        font-size: .28rem;
        width: 100%;
    }
    .car-price{
        margin-top: .14rem;
        width: 100%;
        overflow: hidden;
    }

    .new_car_price{
        color: #d64532;
    }
    .old_car_price{
        color: #000;
        position: relative;
    }
    .old_car_price:after{
        content: '';
        position: absolute;
        left: 15%;
        top: 50%;
        border-top: 1px solid #000;
        width: 100%;
    }


    .shop_num{
        width: 100%;
        overflow: hidden;
        margin-top: .12rem;
    }
    .shop_num span{
        display: inline-block;
        width: .6rem;
        height: .44rem;
        border-radius:  6px;
        text-align: center;
        line-height: .44rem;
        border: 1px solid #ddd;
        font-size: .28rem;
        margin-top: .01rem;
        background: #f2f3f5;
    }
    .shop_num input{
        display: inline-block;
        width: 1.2rem;
        border-radius:  4px;
        height: .44rem;
        text-align: center;
        line-height: .44rem;
        border: 1px solid #ddd;
        font-size: .28rem;
        margin-top: .01rem;
    }
    .shop_num_nm{
        background: #fff;
    }

    .car-footer{
        background: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .car-footer .confirm_button{
        background: #d64532;
        border-color: #d64532;
    }
    .car-footer .div-onlyRead{
        pointer-events: none;
    }
    .footer_chajia{
        width: 100%;
        overflow: hidden;

        background: rgba(252, 248, 236, .7);
        color: #e0712c;
        line-height: .8rem;
        height: .8rem;
        text-align: center;
        font-size: .28rem;
        border-bottom: 1px solid #eee;
    }
    .car-footer_all{
        width: 100%;
        overflow: hidden;
    }
    .foot_go_back{
        height: 1.2rem;
        float: left;
        line-height: 1.2rem;
        width: 1.2rem;
        text-align: center;
        color: #000;
        font-size: .32rem;
        overflow: hidden;
    }

    .total-cont{
        height: 1.2rem;
        text-align: center;
        float: left;
        width: 45%;
        padding: .2rem 0;
    }
    .all_price{
        line-height: .4rem;
        font-size: .32rem;
        width: 100%;
        font-weight: 600;
    }
    .all_price span{
        color: #d64532;
    }
    .old_all_price{
        line-height: .4rem;
        font-size: .26rem;
        width: 100%;
        position: relative;
    }
    .old_all_price::after{
        content: '';
        position: absolute;
        left: 15%;
        top: 50%;
        border-top: 1px solid #000;
        width: 70%;
    }

    .btn-box{
        float: right;
        height :1.2rem;
        line-height: 1.2rem;
    }
    .btn-box button{
        height: 100%;
        width: 100px;
        border: none;
        background: rgb(214, 69, 50);
        color: #fff;
        font-size: .32rem;
    }

</style>
